<template>
  <base-module
    class="quality-closed-loop-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="echarts-container">
      <echarts-base :options="typeOptions"></echarts-base>
    </div>
    <div class="info">
      <div class="line"></div>
      <div class="info-detail">
        <p>
          <span class="label">质量整改总数</span>
          <span class="value">{{ totalDetails.totalNum }}</span>
        </p>
        <p>
          <span class="label">已闭环</span>
          <span class="value">{{ totalDetails.rectifiedNum }}</span>
        </p>
        <p>
          <span class="label">未闭环</span>
          <span class="value">{{ totalDetails.unRectifiedNum }}</span>
        </p>
      </div>
    </div>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';
import echartsBase from '@/components/echarts/base';

export default {
  name: 'QualityComp',
  props: {
    title: {
      type: [String, Object],
      default: '质量整改'
    },
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      // 整改总数
      totalDetails: {
        totalNum: 0,
        rectifiedNum: 0,
        unRectifiedNum: 0
      }
    };
  },
  computed: {
    projectInfo() {
      return this.$store.state.currentProjectInfo;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    },
    typeOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        series: [
          {
            name: '质量整改统计',
            type: 'pie',
            radius: ['100%', '80%'],
            hoverAnimation: false,
            data: [
              {
                name: '闭环率',
                value: this.totalDetails.rectifiedNum,
                label: {
                  show: true,
                  position: 'center',
                  formatter: function (val) {
                    return `{dr|${val.percent}%}\n{br|${val.name}}`;
                  },
                  rich: {
                    dr: {
                      color: '#fff',
                      fontSize: this.$setRem(16, false)
                    },
                    br: {
                      color: '#91C0F9',
                      lineHeight: this.$setRem(30, false),
                      fontSize: this.$setRem(16, false)
                    }
                  }
                },
                itemStyle: {
                  borderRadius: 20,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#28c5d3'
                    }, {
                      offset: 1, color: '#743dff'
                    }],
                    global: false // 缺省为 false
                  },
                },
              },
              {
                name: '',
                value: this.totalDetails.unRectifiedNum,
                itemStyle: {
                  color: 'rgba(2, 10, 36, .5)'
                }
              }
            ],
          }
        ]
      };
    },
  },
  created() {
    this.getQualityNumsChart();
  },
  components: {
    BaseModule,
    echartsBase
  },
  methods: {
    // 获取问题总数
    async getQualityNumsChart() {
      const { success, data: {
        data
      }} = await this.$Model.getQualityNumsChart({
        projectId: this.projectId
      });
      if (success && data) {
        this.totalDetails = data;
      }
    },
    handleClick() {
      this.$router.push('/quality/inspection');
    }
  }
};
</script>

<style scoped lang="scss">
  .quality-closed-loop-comp {
    /deep/ .base-module-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 40px;
      .echarts-container {
        width: 140px;
        height: 140px;
        float: left;
      }
      .info {
        width: calc(100% - 130px);
        height: 140px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .line {
          width: 2px;
          height: 100%;
          background: linear-gradient(0deg, #28c5d3 0%, #743dff 100%);
          border-radius: 2px;
          margin-left: 20px;
        }
        .info-detail {
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding-left: 20px;
          background: linear-gradient(-90deg, rgba(40, 197, 211, .1) 0%, rgba(116, 61, 255, .1) 100%);
          /*background: linear-gradient(90deg, rgba(116, 61, 255, 0.3) 0%, rgba(40, 197, 211, .1) 100%);*/
          p {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 50px;
            font-size: 16px;
            .label {
              color: #91c0f9;
            }
            .value {
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>
